<template>
  <div class="register-container">
    <div class="background-gradient"></div>
    <el-card class="register-card">
      <div class="title-container">
        <h1 class="title">用户注册</h1>
        <p class="subtitle">创建你的糖尿病健康管理账号</p>
      </div>

      <div class="form-container">
        <div class="form-group">
          <el-input
              v-model="username"
              type="text"
              placeholder="请设置用户名"
              :prefix-icon="User"
              class="input-field"
              :disabled="isLoading"
              @keyup.enter="handleRegister"
          >
            <template #append>
              <el-button
                  v-if="!isLoading"
                  type="info"
                  @click="checkUsername"
                  style="width:83.33px"
              >
                验证
              </el-button>
            </template>
          </el-input>
          <div class="validate-container">
            <el-tag v-if="usernameValid === false" type="danger" class="validate-tag">用户名已存在</el-tag>
            <el-tag v-if="usernameValid === true" type="success" class="validate-tag">用户名可用</el-tag>
          </div>
        </div>

        <div class="form-group">
          <el-input
              v-model="password"
              type="password"
              placeholder="请设置密码"
              :prefix-icon="Lock"
              class="input-field"
              :disabled="isLoading"
              show-password
              @input="handlePasswordInput"
          >
            <template #append>
              <el-tooltip content="密码至少3位" placement="top">
                <el-tag type="warning">提示</el-tag>
              </el-tooltip>
            </template>
          </el-input>
          <div class="validate-container">
            <el-tag v-if="showPasswordHint" type="danger" class="validate-tag">密码长度不足</el-tag>
          </div>
        </div>

        <div class="form-group">
          <el-input
              v-model="confirmPassword"
              type="password"
              placeholder="请确认密码"
              :prefix-icon="Lock"
              class="input-field"
              :disabled="isLoading"
          >
            <template #append>
              <el-tag :type="password === confirmPassword ? 'success' : 'danger'">
                {{ password === confirmPassword ? '一致' : '不一致' }}
              </el-tag>
            </template>
          </el-input>
        </div>
      </div>

      <div class="button-group" style="margin-top: 40px;">
        <el-button
            type="primary"
            @click="handleRegister"
            :loading="isLoading"
            class="register-button"
            :disabled="!username || !password || !confirmPassword ||
                  password !== confirmPassword || usernameValid === false"
        >
          注册账号
        </el-button>
        <el-button @click="goToLogin" class="cancel-button">
          取消
        </el-button>
      </div>

      <div class="login-link">
        已有账号？<el-link @click="goToLogin">立即登录</el-link>
      </div>
    </el-card>
  </div>
</template>

<script setup>
// 脚本部分与原代码一致，未作修改
import { ref, onMounted } from 'vue';
import { User, Lock } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import axios from 'axios';

const router = useRouter();
const username = ref('');
const password = ref('');
const confirmPassword = ref('');
const isLoading = ref(false);
const usernameValid = ref(null);
const showPasswordHint = ref(false);

const checkUsername = async () => {
  if (!username.value) {
    ElMessage.warning('请输入用户名');
    return;
  }
  try {
    isLoading.value = true;
    const response = await axios.get(`/api/users/check/${username.value}`);
    usernameValid.value = response.data.available;
    if (usernameValid.value) {
      ElMessage.success('用户名可用');
    } else {
      ElMessage.error('用户名已存在，请更换');
    }
  } catch (error) {
    console.error('验证用户名失败', error);
    ElMessage.error('验证失败，请稍后再试');
  } finally {
    isLoading.value = false;
  }
};

const handlePasswordInput = () => {
  // 仅当输入内容且长度不足时显示提示
  showPasswordHint.value = password.value.length > 0 && password.value.length < 3;
};
const handleRegister = async () => {
  if (!username.value) { ElMessage.error('请输入用户名'); return; }
  if (!password.value) { ElMessage.error('请输入密码'); return; }
  if (password.value.length < 3) { ElMessage.error('密码长度至少3位'); return; }
  if (password.value !== confirmPassword.value) { ElMessage.error('两次密码输入不一致'); return; }
  if (usernameValid.value === false) { ElMessage.error('用户名已存在，请更换'); return; }

  try {
    isLoading.value = true;
    const response = await axios.post('/api/users/', {
      username: username.value,
      password: password.value
    });
    ElMessage.success('注册成功，请登录');
    setTimeout(() => router.push('/'), 1500);
  } catch (error) {
    console.error('注册失败', error);
    if (error.response && error.response.status === 400) {
      ElMessage.error(error.response.data.detail || '用户名已存在');
    } else {
      ElMessage.error('注册失败，请检查输入信息');
    }
  } finally {
    isLoading.value = false;
  }
};

const goToLogin = () => {
  router.push('/');
};

onMounted(() => {
  const input = document.querySelector('.el-input__inner');
  if (input) input.focus();
});
</script>

<style scoped>
/* 全局布局 */
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  width:100% !important;
  max-width:none;
  margin:0 auto;
}

/* 背景渐变 */
.background-gradient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  z-index: -1;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 注册卡片 */
.register-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 3rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1),
  0 0 0 1px rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  overflow: hidden;
}

@keyframes shine {
  0% { transform: rotate(30deg) translateX(-100%); }
  100% { transform: rotate(30deg) translateX(100%); }
}

.register-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
      to bottom right,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0) 60%
  );
  transform: rotate(45deg);
  pointer-events: none;
  animation: shine 8s infinite linear;
  opacity: 0.5;
}

.register-card:hover {
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.15);
  transform: translateY(-5px) scale(1.01);
}

.title-container {
  text-align: center;
  margin-bottom: 40px;
}

.title {
  font-size: 36px;
  font-weight: 800;
  color: #2c3e50;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #409EFF, #67c23a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subtitle {
  font-size: 20px;
  color: #7f8c8d;
}

/* 表单样式 */
.form-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.input-field {
  width: 100%!important;
}

.input-field .el-input__wrapper {
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 0 20px;
  height: 56px;
  background: rgba(255, 255, 255, 0.7);
}

.input-field .el-input__wrapper:hover {
  border-color: rgba(64, 158, 255, 0.3);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
}

.input-field .el-input__wrapper.is-focus {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.input-field .el-input__wrapper:focus-within {
  box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.2);
  transform: translateY(-2px);
}

.input-field .el-input__inner {
  height: 64px;
  font-size: 18px;
  color: #333;
}

.validate-container {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.validate-tag {
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 4px;
}

/* 按钮样式 */
.button-group {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 20px;
}

.register-button, .cancel-button {
  min-width: 180px;
  height: 60px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.register-button {
  background-color: #409EFF;
  color: white;
  box-shadow: 0 4px 14px rgba(64, 158, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.register-button:hover {
  background-color: #3083e0;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);
}

.register-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%, -50%);
  transform-origin: 50% 50%;
}

.register-button:focus:not(:active)::after {
  animation: ripple 1s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(20, 20);
    opacity: 0;
  }
}

.cancel-button {
  background-color: white;
  color: #606266;
  border: 2px solid #dcdfe6;
}

.cancel-button:hover {
  color: #409EFF;
  border-color: #409EFF;
  transform: translateY(-3px);
}

/* 登录链接 */
.login-link {
  text-align: center;
  margin-top: 30px;
  font-size: 16px;
  color: #95a5a6;
}

.login-link .el-link {
  color: #409EFF;
  font-weight: 600;
  position: relative;
  padding-bottom: 3px;
  text-decoration: none;
  transition: all 0.3s;
}

.login-link .el-link:hover {
  color: #3071a9;
}

.login-link .el-link:hover::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #409EFF;
  transform: scaleX(1);
}

/* 响应式设计 */
@media (max-width: 640px) {
  .register-card {
    max-width: 90%;
    padding: 36px 28px;
    border-radius: 18px;
  }

  .title {
    font-size: 28px;
  }

  .subtitle {
    font-size: 16px;
  }

  .input-field .el-input__wrapper {
    height: 56px;
    padding: 0 16px;
  }

  .input-field .el-input__inner {
    height: 56px;
    font-size: 16px;
  }

  .register-button, .cancel-button {
    min-width: 160px;
    height: 54px;
    font-size: 16px;
  }
}
</style>
